<template>
  <div class="config">
    <a-tabs>
      <a-tab-pane key="1" tab="主页">
        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
          <a-form-item label="新生寄语">
            <a-textarea
              :auto-size="{ minRows: 4, maxRows: 8 }"
              v-model="homeConfig.richText"
              placeholder="请输入新生寄语"
              style="width: 450px;"
            />
          </a-form-item>
          <div
            v-for="(item, index) in homeConfig.linkList"
            :key="index"
            class="recommend"
          >
            <span>推荐链接标题：</span>
            <a-input
              v-model="item.label"
              placeholder="请输入推荐链接标题"
              style="width: 250px;"
            />
            <span style="margin-left: 15px;">链接地址：</span>
            <a-input
              v-model="item.link"
              placeholder="请输入链接地址"
              style="width: 400px;"
            />
          </div>
          <a-form-item :wrapper-col="{ offset: 2 }">
            <a-button type="dashed" style="width: 60%" @click="addLinkItem">增加一项</a-button>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 2 }">
            <a-button type="primary" @click="save">保存</a-button>
            <a-button style="margin-left: 20px;" @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="学院" force-render>
        暂无配置内容
      </a-tab-pane>
      <a-tab-pane key="3" tab="副页">
        暂无配置内容
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      homeConfig: {
        richText: '',
        linkList: [
          {
            label: '',
            link: ''
          }
        ]
      }
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.$api.report.getConfig({ type: 'homeConfig' }).then(res => {
        if (res.code === 0) {
          if (res.data[0]) {
            this.homeConfig = res.data[0].data
          }
        }
      })
    },
    save () {
      const params = {
        type: 'homeConfig',
        data: this.homeConfig,
        updateUser: this.userInfo.yb_realname,
        updateUserNo: this.userInfo.yb_userid
      }
      console.log(params)
      this.$api.report.updateConfig(params).then(res => {
        if (res.code === 0) {
          this.$message.success('基础配置保存成功！')
        }
      })
    },
    reset () {
      this.homeConfig = {
        richText: '',
        linkList: [{
          label: '',
          link: ''
        }]
      }
    },
    addLinkItem () {
      const linkList = this.homeConfig.linkList
      linkList.push({
        label: '',
        link: ''
      })
    }
  }
}
</script>

<style scoped>
  .recommend {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
</style>
